<template>
  <CollapsePanel name="element-documentations">
    <template #header> ElementDocumentations </template>
    <p>collapse-title :title="$t('panel.ElementDocumentations')"</p>
  </CollapsePanel>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { mapState } from 'pinia';
  import modelerStore from '/@/store/modules/bpmnModeler';
  import { CollapsePanel } from 'ant-design-vue';

  import { Base } from 'diagram-js/lib/model';
  import {
    getDocumentValue,
    setDocumentValue,
  } from '/@/components/BpmnChart/src/components/Panel/bo-utils/documentationUtil';
  import EventEmitter from '/@/utils/bpmn/EventEmitter';

  export default defineComponent({
    name: 'ElementDocumentations',
    components: { CollapsePanel },
    data() {
      return {
        elementDoc: '',
      };
    },
    computed: {
      ...mapState(modelerStore, ['getActive', 'getActiveId']),
    },
    watch: {
      getActiveId: {
        immediate: true,
        handler() {
          this.elementDoc = getDocumentValue(this.getActive as Base) || '';
        },
      },
    },
    mounted() {
      this.elementDoc = getDocumentValue(this.getActive as Base) || '';
      EventEmitter.on('element-update', () => {
        this.elementDoc = getDocumentValue(this.getActive as Base) || '';
      });
    },
    methods: {
      updateElementDoc(value) {
        setDocumentValue(this.getActive as Base, value);
      },
    },
  });
</script>
